<template>
  <div>

    <div>当前等级:{{ map[l] }}</div>
    <div class="cell" v-for="e in Object.keys(map)" @click="setLevel(e)" style="">{{ e }}</div>

  </div>
</template>

<script setup>

import axios from 'axios';
import { ref } from 'vue';
const l = ref(0)
// const m = ref(1)
const cvalue = ref("")
const map = {
  4: '特',
  3: '一',
  2: '二',
  1: '三',
  0: '四、五顿、再',
}

const init = () => {
  axios.get(`${import.meta.env.VITE_APIURL}/ocj`).then(res => {
    l.value = res.data.level
  })
}

setInterval(() => {
  init()
}, 300);

const setLevel = (l) => {
  axios.get(`${import.meta.env.VITE_APIURL}/scj?level=${l}`).then(res => {
  }).catch(err => {
    console.log(err)
  }).finally(() => {
    init()
  })
}

</script>

<style scoped>
.cell {
  width: 100%;
  height: 80px;
  background-color: green;
  display: flex;
  align-items: center;
  border: 1px solid red;
  justify-content: center;
  color: #fff;
}
</style>